<template>
	<view class="order">
		<view class="status-block center">
			<view class="left-info">
				<view class="title">配送详情</view>
				<view class="time">
				{{info.appointment_time}}送达
				</view>
			</view>
			<view class="img center">
				<image :src="car" class="auto-img"></image>
			</view>
		</view>
		<view class="order-info">
			<view class="address-block-s">
				<view class="address-img center">
					<image :src="addressIcon" class="auto-img"></image>
				</view>
				<view class="right-info">
					<view class="user-txts center">
						<view class="name">{{info.consignee}}</view>
						<view class="iphone" v-if="lookIphoneShow==false">{{iphoneFalse}}</view>
						<view class="iphone" v-if="lookIphoneShow==true">{{iphone}}</view>
						<view class="look" @tap="lookPhone">{{lookIphoneShow?'隐藏':'查看电话'}}</view>
					</view>
					<view class="address-txts">
						{{info.shipping_address}}
					</view>
				</view>
			</view>
			<block v-for="(item,index) in info.commodityData" :key="index">

				<view class="shop-item">
					<view class="item-img">
						<image :src="item.main_img" class="auto-img img-radius"></image>
					</view>
					<view class="item-info">
						<view class="title">{{item.commodity_title}}</view>
						<view class="price center">
							<span>¥</span>{{item.commodity_price/100}}
						</view>
					</view>
					<view class="count">X{{item.count}}</view>
				</view>
			</block>
		</view>
		<!-- 	<view class="tools-block center">

			<view class="item" @tap="addressClick">
				<view class="icon   center">
					<image :src="one" class="auto-img"></image>
				</view>
				<view class="txt">导航</view>
			</view>
			<view class="item" @tap="callIphone">
				<view class="icon   center">
					<image :src="iphoneIcon" class="auto-img"></image>
				</view>
				<view class="txt">电话</view>
			</view>

			<view class="border-center"></view>
		</view> -->

		<view class="address-block">

			<view class="txt center">
				<view class="left-name">商品金额</view>
				<view class="right-price">¥{{info.order_amount/100}}</view>
			</view>
			<view class="txt center">
				<view class="left-name">配送骑手</view>
				<view class="right-price">{{riderInfo.name}}</view>
			</view>
			<view class="txt center">
				<view class="left-name">骑手电话</view>
				<view class="right-price">{{riderInfo.mobile}}</view>
			</view>

			<view class="txt center">
				<view class="left-name">下单时间</view>
				<view class="right-price">{{getDate(info.creation_time)}}</view>
			</view>
			<view class="txt center">
				<view class="left-name">支付时间</view>
				<view class="right-price">{{getDate(info.payment_time)}}</view>
			</view>
			<view class="txt center">
				<view class="left-name">订单编号</view>
				<view class="right-price">{{info.orderNumber}}</view>
			</view>
		</view>
		<view class="fixed-block">
			<view class="btn btn-one" @tap="setUserOrderStatusClick(1)">异常</view>
			<view class="btn btn-two" @tap="setUserOrderStatusClick(2)">签收</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 
				addressIcon: require('@/static/order/addressOrder.png'),
				one: require('@/static/order/one.png'),
				iphoneIcon: require('@/static/order/ihone.png'),
				car: require('@/static/order/car.png'),
				lookIphoneShow: false,
				iphone: '',
				distance: 0, //"距离"
				title: '四川大学华西医院',
				latitude: 39.909, // 默认定在首都
				longitude: 116.39742,
				scale: 12, // 默认16
				markers: [],
				markerHeight: 30,
				doorAddress: [], //门店地址
				horsemanId: '', //骑手id
				info: {}, //配送详情
				iphoneFalse: '',
				riderInfo:{},//骑手信息
			}
		},
		onLoad(e) {
			if (e.id) {
				this.info = uni.getStorageSync('distributionInfo') || {}
				this.horsemanId = e.id || 0
				this.init()
			}
		},
		onShow() {
			if (this.info.phone) {
				this.iphone = this.info.phone
				this.iphoneFalse = this.hide_str(this.iphone, 3, 4)
			}

		},
		methods: {
			init() {
				this.$http('order.getHorsemanDetails', {
					token: this.$tools.getToken(),
					horseman_id: this.horsemanId
				}).then(res => {
					if(res.code==200){
						this.riderInfo=res.data.horsemanEntity
					}
					 
				})
			},
			setPhone() {
				if (this.info) {
					let iphone = Number(this.info.phone)
					console.log('iphone', iphone)
					console.log('iphone 12', this.hide_str(iphone, 3, 4))
					return this.hide_str(iphone, 3, 4)
				}
			},
			lookPhone() {
				this.lookIphoneShow = !this.lookIphoneShow
			},
			callIphone() {
				uni.makePhoneCall({
					phoneNumber: this.iphone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})

			},
			hide_str(str, frontLen, endLen) {
				var newStr;
				var len = str.length - frontLen - endLen;

				if (str.length === 2) {
					newStr = str.substring(0, 1) + '*';
				} else if (str.length > 2) {
					var char = '';
					for (let i = 0; i < len; i++) {
						char += '*';
					}
					newStr = str.substring(0, frontLen) + char + str.substring(str.length - endLen);
				} else {
					newStr = str;
				}
				return newStr;
			},
			setUserOrderStatusClick(status) {
				console.log("status", status)
				let that = this
				let str = status == 1 ? '异常' : '签收'
				uni.showModal({
					title: '提示',
					content: '您是否' + str + '此订单?',
					success: function(res) {
						if (res.confirm) {
							that.orderStatus(status,str)
						} else if (res.cancel) {
						}
					}
				});
			},
			orderStatus(status,str) {
				this.$http('order.setUserOrderStatus', {
					token: this.$tools.getToken(),
					orderNumber: this.info.orderNumber,
					user_order_status: status
				}).then(res => {
					 
					if(res.code==200){
						this.$tools.showMsg(str+'操作成功')
						setTimeout(res=>{
							uni.reLaunch({
								url:'/pages/order/index'
							})
						},600)
						 
					}
				})
			},
			addressClick() {
				uni.openLocation({
					latitude: Number(this.latitude), //要去的纬度-地址
					longitude: Number(this.longitude), //要去的经度-地址
					address: this.title, //要去的具体地址
					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			},
		},

	}
</script>
<style>
	page {
		background: #FAFAF5FF;
	}
</style>
<style lang="scss" scoped>
	.status-block {
		height: 180rpx;
		background: linear-gradient(180deg, rgba(255, 234, 189, 1) 0%, rgba(255, 247, 230, 1) 26.62%, rgba(255, 255, 255, 1) 100%);
		padding: 0 72rpx;

		.left-info {
			flex: auto;

			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.time {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 104, 46, 1);
			}
		}

		.img {
			width: 98rpx;
			height: 90rpx;
			flex: none;
		}
	}

	.order-info {
		background: rgba(255, 255, 255, 1);
		padding: 32rpx 46rpx;
		margin-top: 24rpx;

		.address-block-s {
			padding-bottom: 32rpx;
			border-bottom: 2rpx dashed rgba(238, 238, 238, 1);
			display: flex;
			align-items:flex-start;
			 
			.address-img {
				flex: none;
				width: 28rpx;
				height: 28rpx;
				margin-top: 6rpx;
			}

			.right-info {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				flex: auto;
				margin-left: 18rpx;

				.user-txts {
					display: flex;
					align-items: center;

					.iphone {
						margin-left: 20rpx;
					}

					.look {
						margin-left: 14rpx;
						color: rgba(42, 130, 228, 1);
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.address-txts {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					margin-top: 16rpx;
				}
			}
		}

		.shop-item {
			margin-top: 32rpx;
			display: flex;
			align-items: flex-start;

			.item-img {
				flex: none;
				border-radius: 8rpx;
				width: 140rpx;
				height: 140rpx;
			}

			.item-info {
				flex: auto;
				margin-left: 20rpx;

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(27, 25, 25, 1);
					line-height: 1.5em;
				}

				.price {
					color: rgba(199, 44, 30, 1);
					font-size: 32rpx;
					font-weight: 700;
					margin-top: 12rpx;

					span {
						font-size: 22rpx;
					}
				}
			}

			.count {
				padding-left: 90rpx;
				flex: none;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}
	}


	.tools-block {
		margin-top: 24rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			.txt {
				margin-left: 8rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}

		.border-center {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2rpx;
			height: 51rpx;
			background: rgba(238, 238, 238, 1);
		}
	}


	.address-block {
		margin-top: 24rpx;
		padding: 0 48rpx;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 120rpx;
		.txt {
			padding: 28rpx 0;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(27, 25, 25, 1);
		}

		.border {
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
		}

		.left-name {
			flex: auto;
		}

		.right-price {
			flex: none;
			font-size: 30rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 1);
		}

	}

	.fixed-block {
		position: fixed;
		width: 750rpx;
		height: 88rpx;
		opacity: 1;
		bottom: 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn {
			width: 166rpx;
			line-height: 66rpx;
			text-align: center;
			opacity: 1;
			border-radius: 718rpx;
			margin-right: 24rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.btn-one {
			border: 2rpx solid rgba(0, 0, 0, 1);
		}

		.btn-two {
			background: linear-gradient(128.5deg, rgba(250, 229, 104, 1) 0%, rgba(255, 200, 47, 1) 100%), linear-gradient(135.25deg, rgba(248, 220, 89, 1) 0%, rgba(246, 188, 87, 1) 100%), rgba(204, 204, 204, 1);
		}
	}
</style>
